{template 'common/header'}
<script type="text/javascript" src="../addons/xuan_zy/public/poster/js/designer.js"></script>
<ul class="nav nav-tabs">
    <li {if $operation=='list'}class="active"{/if}><a href="{php echo $this->createWebUrl('poster')}">海报列表</a></li>
    <li {if $operation=='add' || $operation=='update'}class="active"{/if}><a href="{php echo $this->createWebUrl('poster', array('op'=>'add'))}">添加/编辑&nbsp;海报</a></li>
</ul>
{if $operation == 'list'}
<div class="clearfix">
<div class="panel panel-default" style="font-size:11px;">
    <div class="panel-heading">
    <div class="panel-body">
        <table class="table table-hover" style="overflow:visible;">
            <thead class="navbar-inner">
                <tr>
                    <th style='width:80px;'>id</th>
                    <th style='width:120px;'>海报名称</th>
                    <th style='width:120px;'>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {loop $list $row}
                <tr>
                    <td>   {$row['id']}</td>
                    <td>{$row['name']}</td>
                    <td>{php echo date('Y-m-d H:i',$row['createtime'])}</td>
                    <td  style="overflow:visible;">
                        
                        <div class="btn-group btn-group-sm" >
                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="javascript:;">操作 <span class="caret"></span></a>
                            <ul class="dropdown-menu dropdown-menu-left" role="menu" style='z-index: 9999;min-width: 50px'>
                                
                                <li><a  href="{php echo $this->createWebUrl('poster',array('op'=>'update','id' => $row['id']));}" title='编辑' ><i class='fa fa-edit'></i> 编辑海报</a></li>
                                <li><a  href="{php echo $this->createWebUrl('poster',array('op'=>'delete','id' => $row['id']));}" title='删除海报' onclick="return confirm('确定要删除该海报吗？');"><i class='fa fa-remove'></i> 删除海报</a></li>
                            </ul>
                        </div>
                        
                    </td>
                </tr>
                {/loop}
            </tbody>
        </table>
        {$pager}
    </div>
</div>
</div>
{else if $operation == 'update' || $operation == 'add'}

<link rel="stylesheet" href="../addons/xuan_zy/public/poster/js/contextMenu/jquery.contextMenu.css">
<style type='text/css'>
    #postera {
        width:320px;height:504px;border:1px solid #ccc;position:relative
    }
   #postera .bg { position:absolute;width:100%;z-index:0}
   #postera .drag[type=img] img,#postera .drag[type=thumb] img { width:100%;height:100%; }
 
   #postera .drag { position: absolute; width:80px;height:80px; }
    
    #postera .drag[type=nickname],#postera .drag[type=time] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #postera .drag img {position:absolute;z-index:0;width:100%; }
    
    #postera .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
            position:absolute;
            width:7px;
            height:7px;
            z-index:1;
            font-size:0;
    }    
    #postera .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
            background:#C00;
     }
    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;}
            .rRightDown{background-color:#00F;}   
    
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
    .context-menu-layer { z-index:9999;}
    .context-menu-list { z-index:9999;}
</style>
<div class="form-group">

    <div class="col-sm-12">
        <table style='width:100%;'>
            <tr>
                <td style='width:320px;padding:10px;' valign='top'>
                    <div id='postera'>
                        {if !empty($item['bg'])}
                        <img src='{php echo tomedia($item['bg'])}' class='bg'/>
                             {/if}
                             {if !empty($data)}
                             {loop $data $key $d}

                             <div class="drag" type="{$d['type']}" index="{php echo $key+1}" style="zindex:{php echo $key+1};left:{$d['left']};top:{$d['top']};
                             width:{$d['width']};height:{$d['height']}" 
                             src="{$d['src']}" size="{$d['size']}" color="{$d['color']}"
                             > 
                            {if $d['type']=='qr'}
                            <img src="../addons/xuan_zy/public/poster/images/qr.jpg" />
                            {elseif $d['type']=='head'}
                            <img src="../addons/xuan_zy/public/poster/images/head.jpg" />
                            {elseif $d['type']=='img' || $d['type']=='thumb'}
                            <img src="{php echo empty($d['src'])?'../addons/xuan_zy/public/poster/images/img.jpg':tomedia($d['src'])}" />
                            {elseif $d['type']=='nickname'}
                            <div class=text style="font-size:{$d['size']};color:{$d['color']}">昵称</div>
                                 {elseif $d['type']=='title'}
                                 <div class=text style="font-size:{$d['size']};color:{$d['color']}">自定义文字</div>
                                 {elseif $d['type']=='marketprice'}
                                 <div class=text style="font-size:{$d['size']};color:{$d['color']}">18833111111</div>
                            {/if}
                            <div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div>
                        </div>
                        {/loop} 
                        {/if}
                    </div>
                </td>
                <td valign='top' style='padding:10px;'>
                    <div class='panel panel-default'>
                        <form action="./index.php" method="get" class="form-horizontal" role="form" id="form1">
                        <input type="hidden" name="c" value="site" />
                        <input type="hidden" name="a" value="entry" />
                        <input type="hidden" name="m" value="xuan_zyy" />
                        <input type="hidden" name="do" value="poster" />
                        <input type="hidden" name="op" value="{$operation}" />
                        <input type="hidden" name="id" value="{$id}" />
                        <input type="hidden" name="post" value="1" />
                        <input type="hidden" name="data" value="">
                        <div class='panel-body'>
                            <div class="form-group" style="float: left">
                                <label class="col-sm-3 control-label">海报名称</label>
                                <div class="col-sm-9 col-xs-12">
                                    <input type="text" name="name" value="{$item['name']}" class="form-control">
                                </div>
                            </div>

                            <div class="form-group"  style="float: left">
                                <label class="col-sm-3 control-label">分类</label>
                                <div class="col-sm-9 col-xs-12">
                                    <select name="category" class='form-control'>
                                        {loop $categorychild $vo}
                                        <option value="{$vo['id']}" {if $item['category']==$vo['id']}selected{/if}>{$vo['name']}</option>
                                        {/loop}
                                    </select>
                                    <span class='help-block'>发布分类</span>
                                </div>
                            </div>
                            <div class="form-group" id="bgset" style="float: left">
                                <label class="col-sm-2 control-label">背景图片</label>
                                <div class="col-sm-9 col-xs-12">
                                    {php echo tpl_form_field_image('bg',$item['bg'])}
                                    <span class='help-block'>背景图片尺寸: 320*500，png图片</span>
                                </div>
                            </div>



                            <div class="form-group" style="float: left">
                                <label class="col-sm-3 control-label">海报元素</label>
                                <div class="col-sm-9 col-xs-12">
                                    <button class='btn btn-default btn-com' type='button' data-type='head' >头像</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='nickname' >昵称</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='qr' >二维码</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='title' >自定义文字</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='marketprice' >电话</button>
                                </div>
                            </div>
                            <div id='qrset' style='display:none'>
                                <div class="form-group" style="float: left">
                                    <label class="col-sm-3 control-label">二维码尺寸</label>
                                    <div class="col-sm-9 col-xs-12">
                                        <select id='qrsize' class='form-control'>
                                            <option value='1'>1</option>
                                            <option value='2'>2</option>
                                            <option value='3'>3</option>
                                            <option value='4'>4</option>
                                            <option value='5'>5</option>
                                            <option value='6'>6</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                            <div id='nameset' style='display:none'>
                                <div class="form-group" style="float: left;">
                                    <label class="col-sm-2 control-label">昵称颜色</label>
                                    <div class="col-sm-9 col-xs-12">
                                        {php echo tpl_form_field_color('color')}
                                    </div>
                                </div>
                                <div class="form-group" style="float: left;">
                                    <label class="col-sm-3 control-label">昵称大小</label>
                                    <div class="col-sm-9 col-xs-12">
                                        <div class='input-group'>
                                            <input type="text" id="namesize" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"></label>
                                <div class="col-sm-7 col-lg-9 col-xs-12">
                                    <button class="btn btn-default">提交</button>
                                    <input type="hidden" name="token" value="{$_W['token']}" />
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<script language='javascript'>
require(['bootstrap'], function() {
    $('#myTab a').click(function(e) {
        e.preventDefault();
        $('#tab').val($(this).attr('href'));
        $(this).tab('show');
    })
});

function showGoodsSelect(show) {
    if (show) {
        $('#goodsdiv').show();
    } else {
        $('#goodsdiv').hide();
    }
}

$('#form1').submit(function() {
    var data = [];
    $('.drag').each(function() {
        var obj = $(this);
        var type = obj.attr('type');
        var left = obj.css('left'),
        top = obj.css('top');
        var d = {
            left: left,
            top: top,
            type: obj.attr('type'),
            width: obj.css('width'),
            height: obj.css('height')
        };
        if (type == 'nickname' || type == 'title' || type == 'marketprice' || type == 'productprice' || type == 'time') {
            d.size = obj.attr('size');
            d.color = obj.attr('color');
        } else if (type == 'qr') {
            d.size = obj.attr('size');
        } else if (type == 'img') {
            d.src = obj.attr('src');
        }
        data.push(d);
    });
    $(':input[name=data]').val(JSON.stringify(data));
    $('form').removeAttr('stop');
    return true;
});
function bindEvents(obj) {
    var index = obj.attr('index');
    var rs = new Resize(obj, {
        Max: true,
        mxContainer: "#postera"
    });
    rs.Set($(".rRightDown", obj), "right-down");
    rs.Set($(".rLeftDown", obj), "left-down");
    rs.Set($(".rRightUp", obj), "right-up");
    rs.Set($(".rLeftUp", obj), "left-up");
    rs.Set($(".rRight", obj), "right");
    rs.Set($(".rLeft", obj), "left");
    rs.Set($(".rUp", obj), "up");
    rs.Set($(".rDown", obj), "down");
    rs.Scale = true;
    var type = obj.attr('type');
    if (type == 'nickname' || type == 'img' || type == 'title' || type == 'marketprice' || type == 'productprice' || type == 'time') {
        rs.Scale = false;
    }
    new Drag(obj, {
        Limit: true,
        mxContainer: "#postera"
    });
    $('.drag .remove').unbind('click').click(function() {
        $(this).parent().remove();
    }) 
    require(['../addons/xuan_zy/public/poster/js/contextMenu/jquery.contextMenu.js'],function() {
        $.contextMenu({
            selector: '.drag[index=' + index + ']',
            callback: function(key, options) {
                var index = parseInt($(this).attr('zindex'));

                if (key == 'next') {
                    var nextdiv = $(this).next('.drag');
                    if (nextdiv.length > 0) {
                        nextdiv.insertBefore($(this));
                    }
                } else if (key == 'prev') {
                    var prevdiv = $(this).prev('.drag');
                    if (prevdiv.length > 0) {
                        $(this).insertBefore(prevdiv);
                    }
                } else if (key == 'last') {
                    var len = $('.drag').length;
                    if (index >= len - 1) {
                        return;
                    }
                    var last = $('#postera .drag:last');
                    if (last.length > 0) {
                        $(this).insertAfter(last);
                    }
                } else if (key == 'first') {
                    var index = $(this).index();
                    if (index <= 1) {
                        return;
                    }
                    var first = $('#postera .drag:first');
                    if (first.length > 0) {
                        $(this).insertBefore(first);
                    }
                } else if (key == 'delete') {
                    $(this).remove();
                }
                var n = 1;
                $('.drag').each(function() {
                    $(this).css("z-index", n);
                    n++;
                })
            },
            items: {
                "next": {
                    name: "调整到上层"
                },
                "prev": {
                    name: "调整到下层"
                },
                "last": {
                    name: "调整到最顶层"
                },
                "first": {
                    name: "调整到最低层"
                },
                "delete": {
                    name: "删除元素"
                }
            }
        });
        obj.unbind('click').click(function() {
            bind($(this));
        })

    });

}
var imgsettimer = 0;
var nametimer = 0;
var bgtimer = 0;
function bindType(type) {
    $("#goodsparams").hide();
    $(".type4").hide();
    if (type == '4') {
        $(".type4").show();
    } else if (type == '3') {
        $("#goodsparams").show();
    }
}
function clearTimers() {
    clearInterval(imgsettimer);
    clearInterval(nametimer);
    clearInterval(bgtimer);

}
function getImgUrl(val) {
    if (val.indexOf('http://') == -1) {
        val = "../attachment/" + val;
    }
    return val;
}
function bind(obj) {
    var imgset = $('#imgset'),
    nameset = $("#nameset"),
    qrset = $('#qrset');
    imgset.hide(),
    nameset.hide(),
    qrset.hide();
    clearTimers();
    var type = obj.attr('type');
    if (type == 'img') {
        imgset.show();
        var src = obj.attr('src');
        var input = imgset.find('input');
        var img = imgset.find('img');
        if (typeof(src) != 'undefined' && src != '') {
            input.val(src);
            img.attr('src', getImgUrl(src));
        }

        imgsettimer = setInterval(function() {
            if (input.val() != src && input.val() != '') {
                var url = getImgUrl(input.val());

                obj.attr('src', input.val()).find('img').attr('src', url);
            }
        },
        10);

    } else if (type == 'nickname' || type == 'title' || type == 'marketprice' || type == 'productprice' || type == 'time') {

        nameset.show();
        var color = obj.attr('color') || "#000";
        var size = obj.attr('size') || "16";
        var input = nameset.find('input:first');
        var namesize = nameset.find('#namesize');
        var picker = nameset.find('.sp-preview-inner');
        input.val(color);
        namesize.val(size.replace("px", ""));
        picker.css({
            'background-color': color,
            'font-size': size
        });

        nametimer = setInterval(function() {
            obj.attr('color', input.val()).find('.text').css('color', input.val());
            obj.attr('size', namesize.val() + "px").find('.text').css('font-size', namesize.val() + "px");
        },
        10);

    } else if (type == 'qr') {
        qrset.show();
        var size = obj.attr('size') || "3";
        var sel = qrset.find('#qrsize');
        sel.val(size);
        sel.unbind('change').change(function() {
            obj.attr('size', sel.val())
        });
    }
}

$(function() {
    {if ! empty($item['id'])}
    $('.drag').each(function() {
        bindEvents($(this));
    }) 
    {/if}

        {if !empty($item['bg'])}

        var img = new Image();
        img.src =$(".bg").attr('src');
        $('#postera').css('width',img.width);
        $('#postera').css('height',img.height);
        console.log(img.width);

        {/if}

    $(':radio[name=type]').click(function() {
        var type = $(this).val();
        bindType(type);
    })

    $(':radio[name=resptype]').click(function() {
        var type = $(this).val();
        if (type == 1) {
            $(".resptype1").show();
            $(".resptype0").hide();
        } else {
            $(".resptype0").show();
            $(".resptype1").hide();
        }
    })
    //改变背景
    $('#bgset').find('button:first').click(function() {
        var oldbg = $(':input[name=bg]').val();
        bgtimer = setInterval(function() {
            var bg = $(':input[name=bg]').val();
            if (oldbg != bg) {
                bg = getImgUrl(bg);
                $('#postera .bg').remove();
                var bgh = $("<img src='" + bg + "' class='bg' />");
                var first = $('#postera .drag:first');
                if (first.length > 0) {
                    bgh.insertBefore(first);
                } else {
                    $('#postera').append(bgh);
                }
                oldbg = bg;
                //改变拖拽大小
                var img = new Image();
                img.src = bg;
                $('#postera').css('width',img.width);
                $('#postera').css('height',img.height);

            }
        },
        10);
    })

    $('.btn-com').click(function() {

        var imgset = $('#imgset'),
        nameset = $("#nameset"),
        qrset = $('#qrset');
        imgset.hide(),
        nameset.hide(),
        qrset.hide();
        clearTimers();

        if ($('#postera img').length <= 0) {
            //alert('请选择背景图片!');
            //return;
        }
        var type = $(this).data('type');
        var img = "";
        if (type == 'qr') {
            img = '<img src="../addons/xuan_zy/public/poster/images/qr.jpg" />';
        } else if (type == 'head') {
            img = '<img src="../addons/xuan_zy/public/poster/images/head.jpg" />';
        } else if (type == 'img' || type == 'thumb') {
            img = '<img src="../addons/xuan_zy/public/poster/images/img.jpg" />';
        } else if (type == 'nickname') {
            img = '<div class=text>昵称</div>';
        } else if (type == 'time') {
            img = '<div class=text>失效时间</div>';
        } else if (type == 'title') {
            img = '<div class=text>自定义文字</div>';
        } else if (type == 'marketprice') {
            img = '<div class=text>18833111111</div>';
        } else if (type == 'productprice') {
            img = '<div class=text>商品原价</div>';
        }
        var index = $('#postera .drag').length + 1;
        var obj = $('<div class="drag" type="' + type + '" index="' + index + '" style="z-index:' + index + '">' + img + '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

        $('#postera').append(obj);

        bindEvents(obj);

    });

    $('.drag').click(function() {
        bind($(this));
    })

})
</script>
{/if}
{template 'common/footer'}